import React from 'react'
import { Pie } from '@ant-design/plots'
import { Card } from 'antd'

const DemoPie = () => {
  const data = [
    { type: '自燃报警', value: 25 },
    { type: '设备报警', value: 10 },
    { type: '禁烟区吸烟报警', value: 27 },
    { type: '消防通道阻塞报警', value: 18 },
    { type: '车辆占用消防通道报警', value: 15 },
    { type: '车辆禁行区域行驶报警', value: 5 },
  ]
  const config = {
    data: data,
    angleField: 'value',
    colorField: 'type',
    insetLeft: 30,
    insetRight: 100,
    insetTop: 30,
    insetBottom: 30,

    label: {
      text: 'value',
      position: 'outside',
    },
    tooltip: {
      title: 'type',
    },
    legend: {
      color: {
        title: false,
        position: 'right',
      },
    },
  }
  return (
    <Card title="报警统计" style={{ height: '100%' }}>
      <Pie height={300} {...config} />
    </Card>
  )
}

export default DemoPie
